<template>
	<view class="container">
		<!-- 导航栏 -->
	
		<mpDevBubble />
		<!-- 充值金额区域 -->
		<view class="amount-section">
			<view class="amount-column">
				<view class="amount-item" :class="{ active: selectedAmount === 50 }" @click="selectAmount(50)">
					<text>¥50</text>
				</view>
				<view class="amount-item" :class="{ active: selectedAmount === 300 }" @click="selectAmount(300)">
					<text>¥300</text>
				</view>
			</view>
			<view class="amount-column">
				<view class="amount-item" :class="{ active: selectedAmount === 100 }" @click="selectAmount(100)">
					<text>¥100</text>
				</view>
				<view class="amount-item" :class="{ active: selectedAmount === 500 }" @click="selectAmount(500)">
					<text>¥500</text>
				</view>
			</view>
			<view class="amount-column">
				<view class="amount-item" :class="{ active: selectedAmount === 200 }" @click="selectAmount(200)">
					<text>¥200</text>
				</view>
				<view class="amount-item custom-amount" :class="{ active: selectedAmount === customAmount }"
					@click="showCustomAmountInput">
					<text v-if="customAmount > 0">¥{{ customAmount }}</text>
					<text v-else>自定义</text>
				</view>
			</view>
		</view>
		<!-- 充值活动区域 -->
		<view class="activity-section">
			<text class="activity-title">充值活动:</text>
			<text v-if="reSum>0" class="activity-content">充值{{reSum}}元送{{doSum}}元，有效期至{{date}}。</text>
			<text class="activity-content">{{pro}}</text>
		</view>
		<!-- 支付方式区域 -->
		<view class="payment-section">
			<!--  #ifndef MP-WEIXIN -->
			<button class="payment-btn alipay-btn" @click="payWithAlipay">支付宝支付</button>
			<!--  #endif -->
			<button class="payment-btn wechat-btn" @click="payWithWechat">微信支付</button>
		</view>
	</view>
</template>

<script>
	import Config from '@/util/index.js'
	import {
		promotionRechargeInfo,
		getwxOpenId,
		rechargePayByWx
	} from '@/api/user'

	export default {
		data() {
			return {
				selectedAmount: 50, // 记录选中的充值金额
				customAmount: 0.0, // 存储自定义输入的金额
				userId: '',
				cardType: '',
				deptId: '',
				reSum: 0,
				doSum: 0,
				date: '',
				pro: '',
				amout: 0.0,
				cardId: '',
				cardNumber: '',
			}
		},
		onLoad(option) {
			this.cardType = option.cardType;
			this.deptId = option.deptId;
			console.log(this.cardType); //打印出上个页面传递的参数。
			console.log(this.deptId); //打印出上个页面传递的参数。
			const systemInfo = uni.getSystemInfoSync();
			const platform = systemInfo.platform;
			this.userId = uni.getStorageSync('userId');
			this.cardId = uni.getStorageSync("cardId");
			this.cardNumber = uni.getStorageSync("cardNumber");
			this.getData();
		},
		methods: {
			// 选择充值金额
			selectAmount(amount) {
				this.selectedAmount = amount;
			},
			// 显示自定义金额输入框的模态框
			showCustomAmountInput() {
				console.log('showCustomAmountInput called');
				uni.showModal({
					title: '输入金额',
					content: '',
					editable: true,
					placeholderText: '请输入金额',
					success: (res) => {
						if (res.confirm) {
							const amount = parseFloat(res.content);
							if (amount > 0) {
								this.customAmount = amount;
								this.selectedAmount = amount;
									console.log(this.customAmount);
							} else {
								uni.showToast({
									title: '请输入有效的正整数金额',
									icon: 'none'
								});
							}
						}
					}
				});
			},
			// 支付宝支付（这里只是模拟，实际需要接入支付宝支付SDK并处理支付流程）
			payWithAlipay() {
				uni.showToast({
					title: '使用支付宝支付，金额：' + this.selectedAmount + '元',
					icon: 'none'
				});
			},
			// 微信支付（这里只是模拟，实际需要接入微信支付SDK并处理支付流程）
			payWithWechat() {
				if (this.selectedAmount == 0 ) {
					uni.showModal({
						content: "请先选择充值金额",
						success() {
								
						}
					})
					return
				} else{
					this.amout = this.selectedAmount;
				}
				// #ifdef MP-WEIXIN 
				console.log(this.amout)
				//小程序支付
				uni.login({
					provider: 'weixin',
					success: res => {
						if (res.code) {
							// 获取到登录凭证code
							let code = res.code;
							// 调用后端接口，传递code进行获取openid操作
							this.getOpenid(code)
						}
					}
				});
				// #endif
				// uni.showToast({
				// 	title: '使用微信支付，金额：' + this.selectedAmount + '元',
				// 	icon: 'none'
				// });
			},
			getData() {
				const app = this
				let params = {
					userId: app.userId,
					deptId: app.deptId,
					userType: app.cardType
				}
				promotionRechargeInfo(params).catch(res1 => {

					if (res1.data.code == 200) {

						console.log("xxx", res1.data)
						for (var i = 0; i < res1.data.rows.length; i++) {
							if (res1.data.rows[i].proState == "1" && app.cardType == res1.data.rows[i].userType) {
								app.reSum = res1.data.rows[i].reSum;
								app.doSum = res1.data.rows[i].doSum;
								app.date = res1.data.rows[i].endTime;
								app.pro = res1.data.rows[i].pro;
								break
							}
						}
					}
				})

			},
			getOpenid(cdos) {
				let params = {
					code: cdos,
					userId: this.userId
				}
				let _this = this
				getwxOpenId(params).catch(resp => {
					let pars = {
						userId: _this.userId,
						cardId: _this.cardId,
						cardNum: _this.cardNumber,
						money: _this.amout,
						deptId:_this.deptId,
						userType:_this.cardType,
						openId: resp.data.openid,

					}
					console.log(pars)
					rechargePayByWx(pars).catch(resp => {
						console.log(resp)
						//调用微信官方支付接口弹出付款界面,输入密码扣款
						wx.requestPayment({
							timeStamp: resp.data.timeStamp, //时间戳
							nonceStr: resp.data.nonceStr, //随机字符串
							package: resp.data.package, //prepay_id
							signType: resp.data.signType, //签名算法MD5
							paySign: resp.data.paySign, //签名
							success(res) {
								console.log("res32123", res)
								if (res.errMsg == "requestPayment:ok") {
									uni.showToast({
										title: "支付成功",
										icon: 'none',
										duration: 2000
									});
									uni.navigateBack({
										delta: 1
									})
									//  _this.showPay = false
									//_this.updataOrderState()
								} else {
									uni.showToast({
										title: "支付失败",
										icon: 'none',
										duration: 2000
									});
								}
							},
							fail(res) {
								console.log("456", res)
								uni.showToast({
									title: "已取消支付",
									icon: 'none',
									duration: 2000
								});
								// _this.showPay = false

							},
							complete(res) {
								console.log("789", res)
							}
						})
					})
				})
			},
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px;
	}

	.navbar {
		background-color: #f5f5f5;
		width: 100%;
	}

	.amount-section {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 20px 0;
	}

	.amount-column {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc((100vw - 60px) / 3);
		margin-bottom: 20px;
	}

	.amount-item {
		width: 100%;
		height: 80px;
		border: 1px solid #e5e5e5;
		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;
		cursor: pointer;
		box-sizing: border-box;
		padding: 0 10px;
		font-size: calc(12px + 2 * (100vw / var(--design-width)));
	}

	.amount-item.active {
		background-color: #e6f7ff;
		border-color: #1890ff;
	}

	.custom-amount {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10px;
		box-sizing: border-box;
		padding: 0 10px;
		font-size: calc(12px + 2 * (100vw / var(--design-width)));
	}

	.custom-amount u-icon {
		margin-left: 5px;
	}

	.activity-section {
		display: flex;
		flex-direction: column;
		padding: 0 20px;
		margin-bottom: 20px;
		font-size: calc(12px + 2 * (100vw / var(--design-width)));
	}

	.activity-title {
		font-size: calc(14px + 2 * (100vw / var(--design-width)));
		font-weight: bold;
		margin-bottom: 5px;
	}

	.payment-section {
		display: flex;
		justify-content: space-around;
		padding: 0 20px;
		font-size: calc(14px + 2 * (100vw / var(--design-width)));
	}

	.payment-btn {
		height: 40px;
		border-radius: 8px;
		font-size: calc(14px + 2 * (100vw / var(--design-width)));
		cursor: pointer;
	}

	/* 非微信小程序环境下的样式 */
	/*  #ifndef MP-WEIXIN */
	.payment-btn.alipay-btn {
		width: calc(50% - 10px);
		margin-right: 20px;
	}

	/*  #endif */

	/* 微信小程序环境下的样式 */
	/*  #ifdef MP-WEIXIN */
	.payment-btn.wechat-btn {
		width: 100%;
	}

	/*  #endif */

	/* 非微信小程序环境下的样式 */
	/*  #ifndef MP-WEIXIN */
	.payment-btn.wechat-btn {
		width: calc(50% - 10px);
	}

	/*  #endif */

	.alipay-btn {
		background-color: #1890ff;
		color: #fff;
	}

	.wechat-btn {
		background-color: #4cd964;
		color: #fff;
	}
</style>